<template>
  <div>
    <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>
    <div id="info" style="display: none;"></div> <!-- 隐藏原始的信息div，因为我们在infoWindow中处理信息 -->
  </div>
</template>

<script>
export default {
  name: "Map",
  mounted() {
    // 创建地图实例
    var map = new AMap.Map("container", {
      zoom: 14, // 调整缩放级别以更好地显示细节
      resizeEnable: true,
      center: [110.300418, 25.06316], // 设置地图中心点
    });

    // 创建一个信息窗口实例
    var infoWindow = new AMap.InfoWindow({
      anchor: 'top-right',
      offset: new AMap.Pixel(16, -45), // 可以根据需要调整信息窗口的偏移量
    });

    // 标记点击事件处理函数
    var clickHandler = function (e) {
      var content = "<div style='font-size: 14px; color: red; width: 200px; height: 50px; text-align: center; line-height: 50px;'>您在 " + e.lnglat.toString() + " 点击了地图！</div>";
      infoWindow.setContent(content);
      infoWindow.open(map, e.lnglat);
    };

    // 添加标记
    var addMarker = function (position, title) {
      var marker = new AMap.Marker({
        position: new AMap.LngLat(position[0], position[1]),
        title: title,
      });
      marker.on('click', clickHandler);
      map.add(marker);
    };

    // 添加广西师范大学(雁山校区)标记
    addMarker([110.287548, 25.098075], '广西师范大学(雁山校区)');

    // 添加广西师大附中德明外国语学校(良丰路东)标记
    addMarker([110.299585, 25.092427], '广西师大附中德明外国语学校(良丰路东)');

    // 添加桂林理工大学标记
    addMarker([110.300418, 25.06316], '桂林理工大学');

    // 定义驾车导航路径
    var path = [
      [110.287548, 25.098075], // 广西师范大学(雁山校区)
      [110.299585, 25.092427], // 广西师大附中德明外国语学校(良丰路东)
      [110.300418, 25.06316]  // 桂林理工大学
    ];

    // 加载拖拽导航插件并创建拖拽路线实例
    map.plugin('AMap.DragRoute', function () {
      var route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE);
      route.search(); // 查询导航路径并显示
    });

    // 绘制路径折线
    var polyLine = new AMap.Polyline({
      path: path,
      strokeWeight: 5,
      strokeColor: '#3498db', // 更改线条颜色为蓝色
      strokeStyle: "solid",
      lineJoin: 'round',
      zIndex: 5, // 确保折线在标记上方显示
    });
    map.add(polyLine);

    // 实例化城市查询类（如果需要定位功能）
    map.plugin('AMap.Geolocation', function () {
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 10000,           // 超过10秒后停止定位，默认：无穷大
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true,     // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      });

      map.addControl(geolocation); // 添加定位控件

      geolocation.getCurrentPosition(function (status, result) {
        if (status == 'complete') {
          onComplete(result);
        } else {
          onError(result);
        }
      });

      function onComplete(data) {
        console.log(data);
        // 可以在这里添加定位成功后的操作，比如将地图中心移到定位位置
        map.setCenter(data.position);
      }

      function onError(data) {
        console.error(data);
      }
    });
  }
}
</script>

<style scoped>
/* 可以在这里添加样式以美化地图容器或标记 */
#container {
  border: 1px solid #ccc; /* 添加边框以区分地图容器 */
}
</style>
